<template>
	<view class="contents">
		<button style="position: fixed;width: 100%;z-index: 1;" type="primary" v-if="show" open-type="getUserInfo"
			@getuserinfo="getuserinfo" withCredentials="true">微信登录</button>
		<view class="content">
			<view style="height: 600rpx;position: relative;">
				<image src="../../static/my-photo.jpg"
					style="width: 100%;height: 320rpx;border-bottom-left-radius: 60rpx;border-bottom-right-radius: 60rpx;position: relative;">
					<view class="right_up" @click="toSetting">
						<view>
							<image class="right_up_img" mode="aspectFit"
								src="https://trace666.oss-cn-beijing.aliyuncs.com/Settings Icon.png"></image>
						</view>
					</view>
					<view class="tops">
						<view class="top_angle">
							<!-- 设置 -start -->
							<view class="her_60" />
					
							<!-- 设置 -end -->
							<!-- 资料卡 -start -->
							<view class="m_card flx_wap">
								<view class="m_card_top bef_bor flx_cent" style="padding-top: 50rpx;">
									<view class="m_card_img">
										<image class="m_card_imgs" :src="userInfo.avatarUrl" mode="scaleToFill"
											style="float: left;"></image>
									</view>
									<view class="m_card_name" style="display: flex;padding: 30rpx 15rpx;">
										<view>
											<view class="m_card_names">{{userInfo.nickName}}</view>
										</view>
										<image class="m_card_xb"
											src="https://baker-xunji.oss-cn-beijing.aliyuncs.com/xingbie.png" mode=""></image>
					
									</view>
								</view>
								<view style="height: 2rpx;width: 100%;background: #C0C0C0;"></view>
								<view class="m_card_bot">
									<view class="m_text flx_sb" style="width: 100%;height: 160rpx;">
										<view class="m_text_left" style="padding-left: 20rpx;float: left;">
											不走寻常路，只爱陌生人！
										</view>
										<view class="m_text_right ">
											<image class="m_text_right_img"
												src="https://baker-xunji.oss-cn-beijing.aliyuncs.com/EditProfile.png"
												mode="scaleToFill"></image>
										</view>
									</view>
								</view>
							</view>
							<!-- 资料卡 -end -->
						</view>
					</view>
				</image>
			</view>


			<!-- 顶部弧角 -end -->
			<view class="her_20" />
			<!-- 作品-start -->
			<view class="works">
				<view class="my_nav">
					<view :class="['nav_te',navIndex === 0 ? 'nav_tes':'' ]" @click="navIndex=0">
						<view class="titlebar">作品</view>
					</view>
					<view :class="['nav_te',navIndex === 1 ? 'nav_tes':'' ]" @click="navIndex=1">
						<view class="titlebar">收藏</view>
					</view>
				</view>

				<view class="works_exhibition flx_wap" v-show="navIndex === 0">
					<view class="tuijian_item" v-for="item in travelList">
						<!-- <view>创建时间:{{item.createTime}}</view> -->
						<image style="width: 100%;" :src="item.cover" @click="getById(item.id)"></image>
					</view>
				</view>
				<view class="works_exhibition flx_wap" v-show="navIndex === 1">
					<view class="tuijian_item" v-for="item in collectList">
						<!-- <view>创建时间:{{item.createTime}}</view> -->
						<image style="width: 100%;" :src="item.cover" @click="getById(item.id)"></image>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '足迹地图'
				}, {
					name: '作品'
				}],
				userInfo: {
					openId: '',
					nickName: '',
					avatarUrl: '',
					gender: '',
					province: '',
					city: '',
					country: ''
				},
				show: true,
				travelList: [],
				collectList: [],
				navIndex: 0
			}
		},
		onLoad() {

		},
		methods: {
			getuserinfo() {
				this.show = false
				const _this = this
				wx.login({
					provider: 'weixin',
					success: function(res) {
						let appid = 'wx4523f2efb9927fab'
						let secret = 'da8ac326217d0bf44e21391588b88c99'
						let url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + appid + '&secret=' +
							secret + '&js_code=' +
							res.code + '&grant_type=authorization_code';
						//获取openId
						uni.request({
							url: url,
							success: function(res) {
								_this.userInfo.openId = res.data.openid;
								// console.log(_this.userInfo.openId)
								//获取用户信息
								wx.getUserInfo({
									success: function(res) {
										console.log(res.userInfo)
										_this.userInfo.nickName = res.userInfo
											.nickName;
										_this.userInfo.avatarUrl = res.userInfo
											.avatarUrl;
										_this.userInfo.gender = res.userInfo.gender;
										_this.userInfo.province = res.userInfo
											.province;
										_this.userInfo.city = res.userInfo.city;
										_this.userInfo.country = res.userInfo.country;
										uni.setStorageSync('userInfo', _this.userInfo);
									},
									fail: res => {
										uni.showToast({
											title: '您需要授权，才能获取您的信息！'
										});
									}
								});

								let params = {
									openId: _this.userInfo.openId
									//openId:'1111'
								}
								console.log(params)
								uni.request({
									url: 'https://xunji.xmxland.space/findByOpenId',
									"headers": {
										"Content-type": "application/x-www-form-urlencoded",
									},
									method: 'GET',
									data: params,
									success: (res) => {
										_this.travelList = res.data
									}
								});
								uni.request({
									url: 'https://xunji.xmxland.space/findByCollect',
									"headers": {
										"Content-type": "application/x-www-form-urlencoded",
									},
									method: 'GET',
									data: params,
									success: (res) => {
										_this.collectList = res.data
									}
								});

							},
						});

					},
				});

			},
			getById(id) {
				uni.navigateTo({
					url: '../../pages/index/sin?id=' + id
				})
			},
			toSetting() {
				uni.navigateTo({
					url: 'settings'
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		align-items: center;
		justify-content: center;

	}

	.top_angle {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.right_up {
		position: absolute;
		top: 3%;
		right: 3%;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.right_up_img {
		width: 66rpx;
		height: 53rpx;
		padding-top: 6rpx;
	}

	.m_card_imgs {
		width: 100rpx;
		height: 100rpx;
		border-radius: 999rpx;
		bottom: -100rpx;
	}

	.m_card {
		margin: 0 30px;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2rpx solid #999999;
		height: 360rpx;
		width: 600rpx;

	}

	.m_card_top {
		height: 160rpx;
		position: relative;
		padding: 0 24rpx;
	}

	.m_card_bot {
		width: 100%;
		height: 160rpx;
	}

	.m_card_names {
		font-weight: 600;
	}

	.m_text {
		padding: 24rpx 24rpx 0 24rpx;
	}

	.m_text_right_img {
		/* position: fixed; */
		width: 50rpx;
		height: 50rpx;
	}

	.works_tab_title {
		text-align: center;
		height: 46rpx;
		line-height: 46rpx;
		position: relative;
	}

	.tops {
		/* height: 600rpx; */
		position: absolute;
		top: 35%;
	}

	.works {
		width: 100%;
	}

	.title_xz::before {
		content: "";
		position: absolute;
		bottom: -2rpx;
		left: 0;
		width: 100%;
		height: 1rpx;
		background: #04BE02;
	}

	.works_exhibition_img {
		width:100%;
		float: left;
	}

	.contents {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}

	.works_exhibition {
		margin-top: 2rpx;
		width: 100%;
		height: 20%;
		float: left;
	}

	.m_card_xb {
		width: 30rpx;
		height: 30rpx;
		padding-top: 10rpx;
	}

	.m_card_name {}

	.text1 {
		width: 120px;
		height: 25px;
		opacity: 1;
		font-size: 12px;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 800;
		left: 50rpx;
		position: absolute;
		background: #FFFFFF;
	}

	.text2 {
		width: 120px;
		height: 25px;
		opacity: 1;
		font-size: 12px;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		right: 50rpx;
		position: absolute;
		background: #FFFFFF;
	}

	.patient_nav {
		width: 93.4%;
		margin: auto;
		border-radius: 10px;
		margin-left: 3%;
		float: left;
		height: 40px;
		background-color: #FFFFFF;
	}

	.nav_te {
		width: 50%;
		font-size: 14px;
		color: #111010;
		text-align: center;
		height: 40px;
		line-height: 40px;
		float: left;
	}

	.nav_tes {
		width: 50%;
		font-size: 14px;
		color: #FF932F;
		text-align: center;
		height: 40px;
		line-height: 40px;
		float: left;
	}

	.titlebar {
		width: 50%;
		margin: auto;
		border-bottom: 1px solid #FF932F;
	}
</style>
